import React,{Component} from 'react';
import ReactDOM from 'react-dom';
// import propTypes from 'prop-types'
import qqqq from 'prop-types' // 专门用来处理传进来的数据的情况

// 限制传进来的数据的情况
// 一般 当我们去创造一些复用性组件的时候 才会选择使用限制
// 父组件使用子组件的数据  通过参数传递

class Button extends Component{
  static propTypes = {
    // className:qqqq.string  // className必须是一个字符串
    className:qqqq.oneOfType([
      qqqq.string,
      qqqq.number
    ])
  }
  // static  defaultProps = {
  //   // 给默认值的
  //   className:'moren'
  // }
  state = {
    name:"珠峰666"
  }
  click=()=>{
    this.props.onClick&&this.props.onClick()
    this.props.qqq&&this.props.qqq(this.state.name)
  }
  render() {
    console.log(this)
    let {className='qqq',children='按钮'} = this.props; //onClick ==> fn
    // children 对应的就是  组件标签 包含的所有内容；
    // 有三种情况 字符串(纯文本)  数组(多个子节点)  对象(单个节点)
    let str = '你好'
    let ary = ['haha',<i key='123'>hehehe</i>]
    let b = <b>hhhh</b>
    return <button className={className} onClick={this.click}>{children}{str}{ary}{b}</button>
  }
}
// Button.defaultProps = {}   等同于 static defaultProps = {}
class App extends React.Component {
    state = {
      name:"珠峰",
      className:'box'
    }
    fn(){
      console.log(666)
      this.setState({
        name:"珠峰培训"
      })
    }
    qqq=(name)=>{
      this.setState({
        name:name
      })
    }
    render() {
      // Button组件就是 App组件的子组件  App就是 Button组件的 父组件
      let {name,className} = this.state;
        return <div className=''>
            <button onClick={()=>{this.fn()}}>adfgd</button>
            <Button onClick={this.fn.bind(this)}>按钮123</Button>
            <Button className={className}>按钮1234</Button>
            <Button className={666}>按钮7567</Button>
            <Button>你好<i>haha</i></Button>
            <Button qqq={this.qqq}><i>haha</i></Button>
            APP根组件
            {name}
        </div>;
    }
}

ReactDOM.render(<App/>,document.getElementById('root'))